import 'package:flui/flui.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/**
 * 收益明细
 */
class Incom extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _IncomState();
  }
}

class _IncomState extends State<Incom> with SingleTickerProviderStateMixin {
  TabController _tabController;
  List tabs = ["今日", "昨日", "本月", "上月"];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // 创建Controller
    _tabController = TabController(length: tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.yellow,
        elevation: 0,
        title: new Text("收益明细"),
      ),
      body: new Column(
        children: <Widget>[
          _accountCard(),
          _tabSelect(),
          new Expanded(
            child: _tabCard(),
          )
        ],
      ),
    );
  }

  Widget _accountCard() {
    return new Container(
      child: new Padding(
        padding: EdgeInsets.only(left: 20.0, right: 20, top: 0),
        child: new Column(
          children: <Widget>[
            new Container(
              height: 80.0,
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  new Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Text("账户余额(元)"),
                      new SizedBox(
                        height: 10.0,
                      ),
                      new Text(
                        "0.00",
                        style: TextStyle(
                            fontSize: 25.0, fontWeight: FontWeight.bold),
                      )
                    ],
                  ),
                  new OutlineButton.icon(
                      onPressed: () {
                        Navigator.of(context).pushNamed("/withdraw");
                      },
                      icon: Icon(
                        Icons.account_balance_wallet,
                        size: 15.0,
                      ),
                      label: new Text("提现"))
                ],
              ),
            ),
            new SizedBox(
              height: 10,
            ),
            new Flex(
              direction: Axis.horizontal,
              children: <Widget>[
                _accountItem(),
                _accountItem(),
                _accountItem(),
              ],
            )
          ],
        ),
      ),
      height: 155,
      color: Colors.yellow,
      width: double.infinity,
    );
  }

  Widget _accountItem() {
    return Expanded(
      flex: 1,
      child: new Column(
        children: <Widget>[
          new Text(
            "累计收益(元)",
            style: TextStyle(
                color: Color.fromRGBO(
                  134,
                  134,
                  134,
                  1,
                ),
                fontSize: 13.0),
          ),
          new SizedBox(
            height: 5.0,
          ),
          new Text(
            "0.00",
            style: TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold),
          ),
        ],
      ),
    );
  }

  Widget _tabSelect() {
    return new TabBar(
      controller: _tabController,
      tabs: tabs.map((e) => Tab(text: e)).toList(),
    );
  }

  Widget _tabCard() {
    return TabBarView(
      controller: _tabController,
      children: tabs.map((i) {
        //创建3个Tab页
        return _tabCardInfo(i);
      }).toList(),
    );
  }

  Widget _tabCardInfo(i) {
    return new Padding(
      padding: EdgeInsets.only(
        left: 20.0,
        right: 20.0,
        top: 20,
      ),
      child: new Column(
        children: <Widget>[
          new Container(
            padding: EdgeInsets.only(
              bottom: 20,
            ),
            child: new Column(
              children: <Widget>[
                new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    new Text("预估总收益"),
                    new Row(
                      children: <Widget>[
                        new Text(
                          "￥",
                          style: TextStyle(
                              fontSize: 12.0, fontWeight: FontWeight.w600),
                        ),
                        new Text("0.00"),
                      ],
                    )
                  ],
                )
              ],
            ),
            decoration: BoxDecoration(
              border: Border(
                  bottom: BorderSide(
                      color: Color.fromRGBO(101, 93, 29, 0.1), width: 0.51)),
            ),
          ),
          new Container(
            margin: EdgeInsets.only(bottom: 10, top: 20.0),
            padding: EdgeInsets.only(left: 10),
            child: new Column(
              children: <Widget>[
                new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    new Text("我的订单收益"),
                  ],
                )
              ],
            ),
            decoration: BoxDecoration(
              border: Border(left: BorderSide(color: Colors.black, width: 3)),
            ),
          ),
          _shopItem("淘宝", 4, 1.2),
          _shopItem("京东", 4, 1.2),
          _shopItem("拼多多", 4, 1.2),
          new Container(
            margin: EdgeInsets.only(bottom: 10, top: 20.0),
            padding: EdgeInsets.only(left: 10),
            child: new Column(
              children: <Widget>[
                new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    new Text("团队订单收益"),
                  ],
                )
              ],
            ),
            decoration: BoxDecoration(
              border: Border(left: BorderSide(color: Colors.black, width: 3)),
            ),
          ),
          _shopItem("淘宝", 4, 1.2),
          _shopItem("京东", 4, 1.2),
          _shopItem("拼多多", 4, 1.2),
        ],
      ),
    );
  }

  /**
   *
   */
  Widget _shopItem(String title, int orderNum, double money) {
    return new Container(
      child: Flex(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        direction: Axis.horizontal,
        children: <Widget>[
          new Expanded(
            child: new Text(
              title,
              style: TextStyle(
                color: Color.fromRGBO(
                  134,
                  134,
                  134,
                  1,
                ),
              ),
            ),
          ),
          new Expanded(
            child: new Row(
              children: <Widget>[
                new Text(
                  "订单数",
                  style: TextStyle(
                    color: Color.fromRGBO(
                      134,
                      134,
                      134,
                      1,
                    ),
                  ),
                ),
                new SizedBox(
                  width: 5.0,
                ),
                new Text(orderNum.toString() + "单"),
              ],
            ),
          ),
          new Expanded(
            child: new Row(
              children: <Widget>[
                new Text(
                  "预估收益",
                  style: TextStyle(
                    color: Color.fromRGBO(
                      134,
                      134,
                      134,
                      1,
                    ),
                  ),
                ),
                new SizedBox(
                  width: 5.0,
                ),
                new Text(
                  "￥" + money.toString(),
                  style:
                      TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
                ),
              ],
            ),
          )
        ],
      ),
      padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
    );
  }
}
